<template>
    <view class="edit_card">
        <!-- 地址 -->
        <view
            v-if="ShippingAddress.province != null"
            class="flex_wrap row_between"
            @click="openAddress"
        >
            <u-icon
                name="/pages_shop1/static/img/shop/address.png"
                size="66rpx"
            ></u-icon>
            <view class="locations">
                <view class="locations_name">
                    <text>{{ ShippingAddress.consigneeName }}</text>
                    <text>{{ ShippingAddress.consigneeMobile }}</text>
                </view>
                <!-- <u-text size="24rpx" color="#666" text="浙江省杭州市滨江区阿里中心3号楼浙江省杭州市滨江 区阿里中心3号楼" /> -->
                <view class="locations_detail"
                    >{{ ShippingAddress.province }}{{ ShippingAddress.city
                    }}{{ ShippingAddress.county
                    }}{{ ShippingAddress.address }}</view
                >
            </view>
            <u-icon name="arrow-right" color="#D8D8D8" size="18" />
        </view>
        <view
            v-if="ShippingAddress.province == null"
            class="flex_wrap row_between"
            @click="openAddress"
        >
            <u-icon
                name="/pages_shop1/static/img/shop/address.png"
                size="66rpx"
            ></u-icon>
            <u-text
                text="请添加收货地址"
                align="right"
                color="#588BF3 "
                size="28rpx"
            />
            <u-icon name="arrow-right" color="#D8D8D8" size="18" />
        </view>

        <!-- 地址弹框 -->
        <u-popup
            :round="20"
            :show="showAddress"
            @close="closeAddress"
            @open="openAddress"
            bgColor="#F6F6F6"
        >
            <view>
                <view class="takeAddress">
                    <text>收货地址</text>
                    <view @click="closeAddress" class="closeAddress">
                        <u-icon name="close" color="#7B7B7B" size="20" bold />
                    </view>
                </view>
                <view class="manageAddress flex_wrap row_between row_middle">
                    <view>常用地址</view>
                    <u-icon
                        @click="addAddress"
                        name="plus"
                        size="30rpx"
                        color="#538CFF "
                        label="新增"
                        labelSize="32rpx"
                        labelColor="#538CFF"
                        space="4rpx"
                    />
                </view>
                <view class="noaddress" v-if="addressList.length == 0">
                    <u-icon
                        name="/pages_shop1/static/img/shop/noaddress.png"
                        size="160rpx"
                        labelSize="28rpx"
                        labelColor="#999"
                        space="48rpx"
                        label="暂无任何收货地址"
                        labelPos="bottom"
                    />
                </view>
                <view class="address_list" v-if="addressList.length > 0">
                    <scroll-view scroll-y="true" class="address_list_elsebg'">
                        <view
                            v-for="(address, index) in addressList"
                            :key="address"
                            class="address_list_elsebgList"
                        >
                            <view class="flex_wrap row_between">
                                <u-icon
                                    name="/pages_shop1/static/img/shop/address.png"
                                    size="61rpx"
                                ></u-icon>
                                <view class="locations">
                                    <view class="locations_name flex_wrap">
                                        <text>{{ address.consigneeName }}</text>
                                        <text>{{
                                            address.consigneeMobile
                                        }}</text>
                                        <text
                                            class="default"
                                            v-if="address.defaultAddress == '1'"
                                            >默认</text
                                        >
                                    </view>
                                    <view class="locations_detail"
                                        >{{ address.province }}{{ address.city
                                        }}{{ address.county
                                        }}{{ address.address }}</view
                                    >
                                </view>
                                <u-radio-group
                                    placement="column"
                                    @change="groupChange"
                                    v-model="radiovalue1"
                                >
                                    <u-radio
                                        :name="address.id"
                                        :key="index"
                                        iconSize="50rpx"
                                        size="60rpx"
                                        inactiveColor="#999"
                                        activeColor="#588BF3 "
                                    />
                                </u-radio-group>
                            </view>
                            <u-gap
                                marginTop="32rpx"
                                marginBottom="20rpx"
                                height="2rpx;"
                                bgColor="#F3F3F3"
                            />
                            <view class="flex_wrap row_between del">
                                <u-icon
                                    name="trash-fill"
                                    label="删除"
                                    labelSize="24rpx"
                                    @click="
                                        del(address.id, address.defaultAddress)
                                    "
                                />
                                <u-icon
                                    name="/pages_shop1/static/img/shop/manage.png"
                                    bold
                                    label="编辑"
                                    labelSize="24rpx"
                                    labelColor="#588BF3"
                                    @click="to_edit(address.id)"
                                />
                            </view>
                        </view>
                    </scroll-view>
                </view>
                <u-button
                    text="确定"
                    color="#588BF3"
                    :customStyle="{
                        ...buttonCustomStyle,
                        width: '694rpx',
                        marginBottom: '80rpx',
                    }"
                    shape="circle"
                    @click="sureAddress"
                />
            </view>
        </u-popup>
    </view>
</template>

<script>
import { mapGetters } from "vuex";
import {
    getShippingAddress,
    deleteAddress,
    editDefaultAddress,
} from "@/api/shop.js";
export default {
    data() {
        return {
            showAddress: false,
            ShippingAddress: {},
            radiovalue1: "", //默认选中
            radiovalue2: "", //默认选中
            changeDetail: "", //切换选中的
            buttonCustomStyle: {
                width: "526rpx",
                height: "80rpx",
                outline: "none",
                border: "none",
            },
            consigneeId: "",
        };
    },
    computed: {
        ...mapGetters(["addressList"]),
    },

    watch: {
        "$store.state.addressList": {
            //深度监听，可监听到对象、数组的变化
            handler(val, oldVal) {
                if (val) {
                    this.getAddress();
                }
            },
            deep: true, //true 深度监听
        },
    },
    mounted() {
        this.getAddress();
    },
    methods: {
        getAddress() {
            // 过滤出默认显示
            this.ShippingAddress = this.addressList.filter(
                (v) => v.defaultAddress == 1
            )[0];
            console.log(this.ShippingAddress, "this.ShippingAddress>>");
            if (this.ShippingAddress) {
                this.radiovalue1 = this.ShippingAddress.id;
                this.radiovalue2 = this.ShippingAddress.id;
                this.$emit("changeAddress", this.radiovalue1);
                console.log(this.radiovalue2, 11111, this.radiovalue1);
            }
        },
        //修改选中地址按钮
        groupChange(n) {
            this.changeDetail = this.addressList.filter((v) => v.id === n)[0];
        },
        // 默认地址按钮
        radioChange(n) {
            console.log(n, "默认地址按钮");
            editDefaultAddress(n).then(async (res) => {
                uni.$u.toast("默认修改成功！");
                this.radiovalue1 = n;
                this.$emit("changeAddress", this.radiovalue1);
            });
        },
        sureAddress() {
            if (!this.radiovalue1) return uni.$u.toast("请先勾选地址！");
            this.ShippingAddress = this.addressList.filter(
                (v) => v.id === this.radiovalue1
            )[0];
            this.showAddress = false;
            this.$emit("changeAddress", this.radiovalue1);
        },
        //删除地址
        del(id, defaultAddress) {
            console.log(id, defaultAddress, "删除");
            const that = this;
            uni.showModal({
                title: "",
                content: "确定要删除该地址吗？",
                success({ confirm, cancel }) {
                    if (confirm) {
                        deleteAddress(id).then((res) => {
                            uni.$u.toast("删除成功！");
                            that.getShippingAddress();
                            console.log(
                                that.ShippingAddress,
                                that.radiovalue2,
                                "删除",
                                that.radiovalue1
                            );

                            if (
                                that.ShippingAddress.id == that.radiovalue1 &&
                                defaultAddress == 1
                            ) {
                                that.radiovalue1 = "";
                                that.ShippingAddress = "";
                                that.$emit("changeAddress", that.radiovalue1);
                            } else if (
                                that.ShippingAddress.id == that.radiovalue1 &&
                                defaultAddress == 0
                            ) {
                                that.radiovalue1 = "";
                                that.ShippingAddress = "";
                            }
                        });
                    }
                },
            });
        },
        closeAddress() {
            this.showAddress = false;
            this.radiovalue1 = this.ShippingAddress?.id ?? "";
        },
        async openAddress() {
            // await	this.getShippingAddress();
            this.showAddress = true;
        },
        // 获取地址列表
        getShippingAddress(pageNo, pageSize) {
            this.$store.dispatch("GET_ADDRESS_LIST");
        },
        // 编辑按钮
        to_edit(key) {
            // this.showAddress = false;
            uni.navigateTo({
                url: "/pages_shop1/userAddress/edit?addressId=" + key,
            });
        },
        // 新增按钮
        addAddress() {
            // this.showAddress = false;
            uni.navigateTo({
                url: "/pages_shop1/userAddress/index",
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.locations {
    width: 100%;
    padding: 0 16rpx 0 26rpx;
    text-align: left;

    &_name {
        font-size: 28rpx;
        color: #3d3d3d;
        font-weight: 500;

        text {
            margin-right: 32rpx;
        }

        .default {
            margin-left: -12rpx;
            width: 86rpx;
            height: 36rpx;
            border-radius: 4rpx;
            border: 2rpx solid #588bf3;
            font-size: 24rpx;
            color: #588bf3;
            display: block;
            text-align: center;
            font-weight: 400;
        }
    }

    &_detail {
        size: 24rpx;
        color: #666;
        font-weight: 400;
    }
}

// 收货地址弹框
.takeAddress {
    height: 120rpx;
    background: #e2ebff;
    border-radius: 40rpx 40rpx 0rpx 0rpx;
    line-height: 120rpx;
    text-align: center;
    font-size: 40rpx;
    font-weight: 500;
    color: #3d3d3d;
}

.closeAddress {
    position: absolute;
    top: 40rpx;
    right: 32rpx;
}

.manageAddress {
    padding: 28rpx 28rpx 28rpx 40rpx;
    font-size: 32rpx;
    font-weight: 500;
    color: #333333;
}

.noaddress {
    margin: 120rpx auto 240rpx;
}

.address_list {
    padding: 0 28rpx 92rpx;
    overflow: hidden;

    &_bg {
        padding: 40rpx 28rpx 32rpx;
        max-height: 900rpx;
        background: #ffffff;
        border-radius: 20rpx;
        overflow-y: auto;
    }

    &_elsebg {
        max-height: 900rpx;
        border-radius: 20rpx;
        // overflow-y: auto;
    }

    &_elsebgList {
        background: #ffffff;
        border-radius: 20rpx;
        margin-bottom: 40rpx;
        padding: 40rpx 28rpx 12rpx;
    }
}

.del {
    padding-left: 88rpx;
}
</style>
